<template>
<div>
    <div class="class-permit-box" :id="'class-permit-box'+regId">
        <img src="../../assets/img/class-permit-bg.png" alt="" class="bg">
        <ul class="cont">
            <li class="cont-top">
                <img src="../../assets/img/class-permit-head.png" alt="" class="permit-logo">
                <div class="permit-name clearfix">
                    <div class="left">
                        <p>学生编号</p>
                        <p>{{data.student&&data.student.studentNo}}</p>
                    </div>
                    <div class="right">
                        <p>学生姓名</p>
                        <p>{{data.student&&data.student.name}}</p>
                    </div>
                </div>
            </li> 
            <li class="cont-fifter">
               
                <h4 class="course-title">
                    <level  :level="data.courseClass && data.courseClass.level"/> 
                    {{data.courseClass&&data.courseClass.classAliasName}} ({{data.courseClass&&data.courseClass.periodNo}}期)</h4>
                <ul class="course-info">
                    <li>
                        <span>年级：</span>
                        <p>{{data.courseClass&&data.courseClass.gradeName}}</p>
                    </li>
                    <li>
                        <span>校区：</span>
                        <p>{{data.courseClass&&data.courseClass.campusName}}</p>
                    </li>
                    <li>
                        <span>时间：</span>
                        <p><span class="week" v-if="data.courseClass&&(data.courseClass.periodNo=='85'||(data.courseClass.periodNo=='1'&&data.courseClass.areaTeamId=='1714461766180220928'))">{{data.courseClass&&data.courseClass.startCourseTime|formatDate('MM月DD日')}}</span><span class="week" v-if="data.courseClass&&data.courseClass.classDateTip">{{data.courseClass&&data.courseClass.classDateTip}}</span> {{data.courseClass&&data.courseClass.studyingTime}}</p>
                    </li>
                    <!-- <li>
                        <span>讲次：</span>
                        <p>{{data.studentReg&&(data.studentReg.startAmount)}}~{{data.studentReg&&(data.studentReg.endAmount)}}</p>
                    </li> -->
                    <li>
                        <span>地址：</span>
                        <p class="adress">{{data.campus&&data.campus.address}}</p>
                    </li>
                    <li>
                        <span>电话：</span>
                        <p>{{data.campus&&data.campus.phoneNo}}</p>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
    
</template>
<script>
import api from 'util/xhr'
import Level from './Level.vue'
export default {
    props:['regId','data'],
    components:{
        Level,
    },
    data(){
        return{
            regIds:"",
        }
    },
    created(){
        
    },
    watch:{
        // 'regId':{
        //     handler:function(val){
        //         console.log(val)
        //         this.regIds = val
        //         this.courseRegistrationCard()
        //     },
        //     deep:true,
        // }
    },
    methods:{
        // courseRegistrationCard(){
        //      console.log('hhh')
        //     let param = {
        //         regId:this.regIds
        //     }
        //     io.post(io.courseRegistrationCard,param,(data)=>{
        //         console.log(data)
        //     })
        // }
    },
}
</script>
<style lang="less" scoped>
    .class-permit-box{
        position:relative;
        width:636px;
        height:896px;
        background:#fff;
        img.bg{
            width:100%;
            height:auto;
        }
        ul.cont{ 
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            li{ 
                &.cont-top{
                    min-height:428px;
                }
                .permit-logo{
                    width:100%;
                    display:block;
                    height:auto;
                }
                .permit-name{
                    padding:50px 52px 0 39px;
                    box-sizing:border-box;
                    div{
                        p:first-child{
                            font-size:24px;
                            height:24px;
                            line-height:24px;
                            color:#999;
                            margin-bottom:16px;
                        }
                        p:last-child{
                            font-size:30px;
                            height:30px;
                            line-height:30px;
                            color:#333;

                        }
                    }
                    div.left{
                        float:left;
                    }
                    div.right{
                        float:right;
                    }
                }
            }
            li.cont-fifter{
                padding:55px 40px 0 40px;
                h4{
                    height:36px;
                    font-size:36px;
                    line-height:36px;
                    color:#3271f1;
                    font-weight:500;
                }
                .course-info{
                    margin-top:45px;
                    li{
                        margin-bottom:18px;
                        display:flex;
                        font-size:24px;
                        line-height:30px;
                        &>span{
                            color:#666;
                            width:80px;
                        }
                        p{  
                            color:#21212f; 
                            flex:1;
                            line-height:30px;
                            span{
                                color:#333; 
                            }
                        }
                        .adress{
                            // text-overflow: -o-ellipsis-lastline;
                            // overflow: hidden;
                            // text-overflow: ellipsis;
                            // display: -webkit-box;
                            // -webkit-line-clamp: 2;
                            // -webkit-box-orient: vertical;
                        }
                    }
                    .week{
                        // margin-left:2.7rem;
                        margin-right:10px;
                    }
                }

            }
        }
    }
    .clearfix:after{
        display:block;
        content:"";
        height:0;
        visibility: hidden;
        overflow: hidden;
        clear: both;
    }
</style>
